<template>
    <div class="wraper iphone">
        <article class="mission-box">
            <section class="mission-top">
                <div class="mission-top-tit">
                    <img src="../../static/images/task-title.png" alt />
                </div>
                <div class="mission-amount-btn">
                    <span>最高领取 ${{maxNumber}}大礼包</span>
                </div>
                <div class="mission-top-msg" v-if="recruitShowArr.length">
                    <img src="../../static/images/rw-left.png" alt />
                    <span v-if="isNovice">新手任务</span>
                    <span v-else>进阶任务</span>
                    <img src="../../static/images/rw-left.png" alt />
                </div>
            </section>
            <van-loading size="30px" v-if="isLoading" color="#1989fa" vertical>加载中...</van-loading>
            <section class="time-box" v-if="timeStr">剩余 {{ timeStr }} 结束</section>
            <!-- 体验金金额列表 -->
            <div class="mission-pd-box" v-if="recruitShowArr.length">
                <section class="mission-info">
                    <div
                        class="mission-item"
                        v-for="(item,ind) in recruitShowArr"
                        :key="ind"
                        v-if="!item.url.includes('registePage')"
                    >
                        <div class="item-left" :class="{'dis': item.is_send == 1}">
                            <div class="mission-amount">
                                $
                                <span>{{item.reward_ex}}</span>
                            </div>
                            <div class="mission-tit">
                                <p>
                                    {{item.tag }}
                                    <span v-if="item.type == 2">每日任务</span>
                                </p>
                                <span
                                    v-if="item.tag == '待解锁'"
                                >需完成前{{ recruitShowArr.length-1 }}关任务，方可解锁 最高可领取¥{{ item.reward_desc}}</span>
                                <span v-else>{{ item.title }}</span>
                            </div>
                        </div>
                        <div class="item-right">
                            <strong
                                v-if="item.process && item.tid == 1"
                            >进度：{{ item.process.current}}/{{ item.process.total}}</strong>
                            <span v-if="item.is_send == 1" class="btn dis">已领取</span>
                            <span class="btn lock" v-else @click="junpFun(item.url)">
                                <img
                                    v-if="item.tag == '待解锁'"
                                    src="../../static/images/task-lock.png"
                                />
                                去领取
                            </span>
                        </div>
                    </div>
                </section>
            </div>
            <!-- 规则信息 -->
            <article class="mission-rule">
                <div class="mission-top-msg">
                    <img src="../../static/images/rw-left.png" alt />
                    <span>规则说明</span>
                    <img src="../../static/images/rw-left.png" alt />
                </div>
                <div class="mission-pd-box">
                    <div class="mission-info">
                        <div class="rule-box">
                            <ul class="rule-list">
                                <li>
                                    <span>1.</span>
                                    <span>{{$t('missionRuleList1')}}</span>
                                </li>
                                <li>
                                    <span>2.</span>
                                    <span>{{$t('missionRuleList2')}}</span>
                                </li>
                                <li>
                                    <span>3.</span>
                                    <span>{{$t('missionRuleList3')}}</span>
                                </li>
                                <li>
                                    <span>4.</span>
                                    <span>{{$t('missionRuleList4')}}</span>
                                </li>
                                <li>
                                    <span>5.</span>
                                    <span>{{$t('missionRuleList5')}}</span>
                                </li>
                                <li>
                                    <span>6.</span>
                                    <span>{{$t('missionRuleList6')}}</span>
                                </li>
                                <li>
                                    <span>7.</span>
                                    <span>
                                        {{$t('missionRuleList7')}}
                                        <a
                                            @click.prevent="junpFun(helpLink)"
                                        >{{$t('missionRuleList8')}} >></a>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </article>
        </article>
    </div>
</template>
<script src="./taskPage.js"></script>
<style scoped>
@import "./taskPage.css";
</style>